<template>
  <el-popover
  placement="bottom"
  :width="width"
  trigger="click"
  :disabled="disabled"
  popper-class="treeSelect"
  @show="setWidth"
  v-model="isShowSelect">
 <el-tree 
      ref="tree"
      node-key="nodeKey"
      show-checkbox
      default-expand-all
      check-on-click-node
      check-strictly
      highlight-current
      :expand-on-click-node="false"
      :data="treeDataNew"
      :props="defaultProps"
      @check-change="handleCheck"
      :filter-node-method="filterNode"
      >
    </el-tree>

    <el-input
        slot="reference"
        ref="reference"
        :placeholder="$t('common.pleaseSelect')"
        v-model="selectName"
        :disabled="disabled"
        @click.native="setIsShow"
        @mouseenter.native="isHover = true"
        @mouseleave.native="isHover = false"
        @input="setSearchText"
        @focus="inputSearch"
        @blur="endSearch"
        
        >
        
      <i slot="suffix" :class="icon" @click="clearSelect"></i>
    </el-input>

    </el-popover>
</template>
<script>
import { query } from '@/api/common'
export default {
  name: 'treeSelect',
  mounted() {
    if (this.url) {
      query(this.url, this.queryParam).then(response => {
        this.treeDataByUrl = response.data.data
      })
    }

    this.initSelect()
  },
  data() {
    return {
      selectName: '',
      searchText: '',
      selectNameTmp: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeDataByUrl: null,
      isShowSelect: false,
      width: '220px',
      isHover: false
    }
  },
  computed: {
    icon() {
      let classes = ['el-tree-select__caret', 'el-input__icon']
      const tmp = this.clearable && this.isShowSelect === false && this.isHover === true && this.selectName !== '' && this.disabled === false
      if (tmp) {
        classes = [...classes, 'el-icon-circle-close', 'is-show-close']
      } else {
        classes.push(this.isShowSelect ? 'el-icon-arrow-up' : 'el-icon-arrow-down')
      }
      return classes
    },
    treeDataNew() {
      return this.treeData || this.treeDataByUrl
    }
  },
  methods: {
    setSearchText(value) {
      this.searchText = value
    },
    inputSearch() {
      this.selectNameTmp = this.selectName
      this.searchText = ''
      this.selectName = ''
    },
    endSearch() {
      this.selectName = '1'
      this.selectName = this.selectNameTmp
    },
    setWidth() {
      this.width = this.$refs.reference.$el.getBoundingClientRect().width
    },
    handleCheck(data, checked, childchecked) {
      if (checked) {
        const selectKeys = []
        selectKeys.push(data.nodeKey)
        this.$refs.tree.setCheckedKeys(selectKeys)
        this.selectName = data.label

        this.$emit('input', data.nodeKey)
      } else {
        if (this.$refs.tree.getCheckedKeys().length === 0) {
          this.selectName = ''
          this.$refs.tree.setCheckedKeys([])

          this.$emit('input', '')
        }
      }
      this.isShowSelect = false
      this.isNeedEmit = true
    },
    clearSelect() {
      const tmp = this.clearable && this.isShowSelect === false && this.isHover === true && this.selectName !== '' && this.disabled === false
      if (tmp) {
        this.$refs.tree.setCheckedKeys([])
      }
    },
    findObject(tree) {
      let result = ''
      for (let i = 0; i < tree.length; i++) {
        if (tree[i].nodeKey === this.value) {
          result = tree[i].label
          break
        } else {
          if (tree[i].children && tree[i].children.length > 0) {
            result = this.findObject(tree[i].children)
            if (result) {
              break
            }
          }
        }
      }
      return result
    },
    initSelect() {
      if (this.value) {
        if (this.treeDataNew) {
          this.selectName = this.findObject(this.treeDataNew)
          this.$refs.tree.setCheckedKeys([this.value])
        }
      } else {
        this.selectName = ''
        if (this.$refs.tree.getCheckedKeys().length > 0) {
          this.$refs.tree.setCheckedKeys([])
        }
      }
    },
    setIsShow() {
      if (this.disabled === false) {
        this.isShowSelect = !this.isShowSelect
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.toUpperCase().indexOf(value.toUpperCase()) !== -1
    }
  },
  props: {
    url: {
      type: String
    },
    queryParam: {
      type: Object
    },
    treeData: {
      type: Array
    },
    value: {
      type: String

    },
    clearable: {
      type: Boolean,
      default: function() {
        return true
      }
    },
    disabled: {
      type: Boolean,
      default: function() {
        return false
      }
    }
  },
  watch: {
    treeDataNew() {
      this.initSelect()
    },
    value() {
      this.initSelect()
    },
    searchText(val) {
      this.$refs.tree.filter(val)
    }
  }

}
</script>

<style lang="scss">
.treeSelect{
  max-height: 40vh;
  overflow-y: scroll;
  overflow-x: auto;
}
</style>





